<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./1.CSS">
    <style>

        ul{
            width: 100px;
            border: 3px red solid;
            /* 设置父元素为弹性盒，它的子元素都会变成弹性元素
            可以让块水平排列，不会出现高度塌陷的问题，且有益于设置其他样式 */
            display: flex;
            /* 
            主轴：弹性元素排列的的方向
            侧轴：垂直于主轴的方向
             */
            /*
             flex-direction可以设置弹性元素的排列方向
               1.row水平排列，默认值（自左向右）
               2.row-reverse反方向水平排列（自右向左），类似于flow:right;
               3.column垂直排列（自上而下）
               4.column-reverse反方向垂直排列（自下而上）
             */
            /* flex-direction: row-reverse; */

        }
        li{
            font-size: 20px;
            text-align: center;
            line-height: 150px;
            /* 若使用下列代码让三个块水平排列会出现高度塌陷的问题 */
            /* float: left; */
            /* flex-shrink用于缩小弹性元素，值为0表示设置弹性盒不会伸缩（弹性盒会默认自动伸缩） */
            flex-shrink: 0;
        }
        li:nth-child(1){
            width: 150px;
            height: 150px;
            background-color: skyblue;
            /* flex-grow: 0; */
            /* 
            flex-grow用于设置弹性元素的伸展系数，默认值为flex-grow: 0;
              给弹性元素设置弹性系数，则会根据弹性盒的大小和弹性系数给弹性元素设置相应的大小
              而且所有弹性元素的大小加起来刚好可以填满整个弹性容器
             */
        }
        li:nth-child(2){
            width: 150px;
            height: 150px;
            background-color: pink;
            /* flex-grow: 1; */

        }
        li:nth-child(3){
            width: 150px;
            height: 150px;
            background-color: orange;
            /* flex-grow: 1; */

        }
    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</body>
</html>